<template>
  <div class="viewColor">
    <div class="header">
      <img src="@/assets/images/return.png" class="header_img" v-on:click="goBackPhone"/>
      <div class="title">消息</div>
    </div>
    <div class="message_box">
      <div class="m_t">系统消息</div>
      <img src="@/assets/images/rightArrow@2x.png"/>
    </div>
    <div class="message_box">
      <div class="m_t">项目消息</div>
      <img src="@/assets/images/rightArrow@2x.png"/>
    </div>
    <div class="message_box">
      <div class="m_t">收支记录</div>
      <img src="@/assets/images/rightArrow@2x.png"/>
    </div>
  </div>
</template>

<script>
  /**
   * 消息
   */
  export default {
    name: "Message",
    methods: {
      goBackPhone() {
        window.webkit.messageHandlers.Message.postMessage({});
      },
    }
  }
</script>

<style scoped>
  .viewColor{
    background-color: #ffffff;
  }
  .header{
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: 90px;
    background-color: #8ec43e;
    align-items: center;
    padding: 0 30px;
  }
  .header_img{
    width: 17px;
    height: 30px;
  }
  .title{
    text-align: center;
    flex: 1;
    font-size: 30px;
    color: #ffff;
  }
  .message_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    margin: 0 30px;
  }
  .message_box:not(:last-child){
    border-bottom: 1px solid rgb(239,239,239);
  }
  .m_t {
    font-size: 28px;
    color: rgb(43,43,43);
  }

  .message_box img {
    width: 14px;
    height: 24px;
  }
</style>
